<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>二维码</title>

    <script>
        (function(){
            var html = document.documentElement;
            var width = html.getBoundingClientRect().width;

            html.style.fontSize = width/18+'px';
            // 1rem=60
        })();

    </script>
    <style type="text/css">
        div{
            background: url('../../../../Template/mobile/new/Static/images/lottery/bj.webp') no-repeat;
            position:fixed;
            top: 0;
            left: 0;
            width:100%;
            height:100%;
            z-index:-10;
            zoom: 1;
            background-color: #fff;
            background-size: 100% 100%;
            -webkit-background-size: 100% 100%;
            -o-background-size: 100% 100%;
            background-position: center center;
            text-align: center;
        }
        canvas{
            border-radius: 3px;
            margin-top: 12.18rem;
            margin-left: 0.2rem;
            width: 9.2rem;
            height: 9rem;


        }
        .span{
            display: none;
        }
        @media screen and (min-height: 811px){
            div{
                background: url('../../../../Template/mobile/new/Static/images/lottery/bj.webp') no-repeat;
                position:fixed;
                top: 0;
                left: 0;
                width:100%;
                height:100%;
                z-index:-10;
                zoom: 1;
                background-color: #fff;
                background-size: 100% 100%;
                -webkit-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-position: center center;
                text-align: center;
            }
            canvas{
                border-radius: 3px;
                margin-top: 14.9rem;
                margin-left: 0.2rem;
                width: 9.2rem;
                height: 9rem;


            }
        }

    </style>
</head>
<body>


<div id='app'>
    <div id="code" class="img">

    </div>
    <span class="span">{$link}</span>

</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>

    var app= new Vue({
        el:"#app",
        data:{
        },
        methods:{
            GetQueryString:function(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }
        },
        mounted:function(){
            var that =this
            console.log($('.span').text())
            var url=$('.span').text()
            $('#code').qrcode(url); //任意字符串
            $.ajax({
                url: "{:U('lottery/code')}",
                type: 'post',
                data : {
                    token:that.GetQueryString('token')
                },
                dataType:"json",
                success: function (res) {
                    if(res.result!==null){

                    }

                }
            })
        }
    });
</script>
</html>